<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>mustache</title>
</head>

<body>
  <div id="dom"></div>
  <script src="../js/mustache.js"></script>
  <script type="text/template" id="temp">
    <div>
      <p>循环对象数组</p>
      <ul>
      {{#arr}}
        <li>{{name}}-{{age}}</li>
      {{/arr}}
      </ul>
      <p>简单数据</p>
      <ul>
        {{#numArr}}
          <li>{{.}}</li>
        {{/numArr}}
      </ul>
      <p>循环嵌套数组</p>
      {{#per}}
        <div>
          {{name}} - {{age}}
          {{#score}}
            {{.}}
          {{/score}}
        </div>
      {{/per}}
    </div>
    <p>今天天气{{weather}}</p>
  </script>
  <script>
    var list = document.getElementById('dom')
    var templateStr = document.getElementById('temp').innerHTML
    var data = {
      arr: [
        { name: '张三', age: 12 },
        { name: '李四', age: 14 },
      ],
      weather: '很好',
      numArr: [1, 2, 3, 4],
      per: [
        { name: '张三', age: 12, score: [80, 90, 100] },
        { name: '李四', age: 12, score: [81, 98, 78] },
      ]
    }
    var domStr = Mustache.render(templateStr, data)
    list.innerHTML = domStr
  </script>
</body>

</html>